<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票啦</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/score.css">
</head>
<style>
     .lab-body:nth-child(2),
		.lab-body:nth-child(6) {
			margin-left: 2em;
			margin-right: 2em;
		} 
</style>
<body>
    <div id="container">
        <div id="top"">
            <h1  style=" color: black;"> 投票</h1>
        </div>
        <form method="POST">
            {% for qs in currentQS %}
            <div class="create">
                <div class="form-group">
                    <div class="lab">
                        <label for="exampleInputEmail1">{{qs.CreateTilte}}</label>
                    </div>

                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab">
                        <label for="exampleInputEmail1">{{qs.remark}}</label>
                    </div>

                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">1.{{qs.topicOne}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreOne">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body" style="padding-bottom: 2%;">
                        <label for="exampleInputEmail1">2.{{qs.topicTwo}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreTwo">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">3.{{qs.topicThree}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreThree">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">4.{{qs.topicFour}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreFour">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">5.{{qs.topicFive}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreFive">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">6.{{qs.topicSix}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreSix">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">7.{{qs.topicSeven}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreSeven">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">8.{{qs.topicEight}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreEight">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">9.{{qs.topicNine}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreNine">
                        </div>
                    </div>
                    <hr style="border-bottom: 1px solid rgb(0, 0, 0);">
                    <div class="lab-body">
                        <label for="exampleInputEmail1">10.{{qs.topicTen}}</label>
                        <div>
                            <label for="">请输入0~10</label>
                            <input type="text" name="" id="scoreTen">
                        </div>
                    </div>

                </div>
                {% endfor %}
                <button type="button" class="btn btn-primary" onclick="submitForm('{{qsid}}')">提交</button>
                <button type="button" class="btn btn-primary" onclick='questionnaire()'>返回</button>
                <label for="" class="errorSubmitForm invisible"
                    style="color: red;"><strong>未完成所有题目，请检查后再提交</strong></label>
        </form>
        </script>

        <script src="../static/js/canvas-particle.js"></script>
        <script src="../static/js/jquery-3.6.0.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
        <script>
            function questionnaire() {
                axios({
                    method: 'post',
                    url: '/questionnaire'
                }).then(function (response) {
                    let res = response.data;
                    if (res.code === 200) {
                        window.location.href = '/index/goQuestionnaire';
                    }
                }).catch((err) => {
                });
            }
        </script>
        <script>
            function submitForm(qsId) {
                // 1~10的正则
                var reg = /^(?:0|[1-9]|10)$/;
                var scoreOne = $("#scoreOne").val();
                if (scoreOne === "" || reg.test(scoreOne) === false) {
                    //第一题未选择
                    fn_errorSubmitForm("第一题答案未填写或超出指定范围");
                } else {
                    //第二题判断
                    var scoreTwo = $("#scoreTwo").val();
                    // console.log(Question2);
                    if (scoreTwo === "" || reg.test(scoreTwo) === false) {
                        //第二题未选择
                        fn_errorSubmitForm("第二题答案未填写或超出指定范围");
                    } else {
                        //第三题判断
                        var scoreThree = $("#scoreThree").val();
                        // console.log(Question3);
                        if (scoreThree === "" || reg.test(scoreThree) === false) {
                            //第三题未选择
                            fn_errorSubmitForm("第三题答案未填写或超出指定范围");
                        } else {
                            //第四题判断
                            var scoreFour = $("#scoreFour").val();
                            if (scoreFour === "" || reg.test(scoreFour) === false) {
                                //第四题未选择
                                fn_errorSubmitForm("第四题答案未填写或超出指定范围");
                            } else {
                                //第五题判断
                                var scoreFive = $("#scoreFive").val();
                                if (scoreFive === "" || reg.test(scoreFive) === false) {
                                    //第一题未选择
                                    fn_errorSubmitForm("第五题答案未填写或超出指定范围");
                                } else {
                                    //第六题判断
                                    var scoreSix = $("#scoreSix").val();
                                    if (scoreSix === "" || reg.test(scoreSix) === false) {
                                        //第一题未选择
                                        fn_errorSubmitForm("第六题答案未填写或超出指定范围");
                                    } else {
                                        //第七题判断
                                        var scoreSeven = $("#scoreSeven").val();
                                        if (scoreSeven === "" || reg.test(scoreSeven) === false) {
                                            //第七题未选择
                                            fn_errorSubmitForm("第七题答案未填写或超出指定范围");
                                        } else {
                                            //第八题判断
                                            var scoreEight = $("#scoreEight").val();
                                            if (scoreEight === "" || reg.test(scoreEight) === false) {
                                                //第八题未选择
                                                fn_errorSubmitForm("第八题答案未填写或超出指定范围");
                                            } else {
                                                //第九题判断
                                                var scoreNine = $("#scoreNine").val();
                                                if (scoreNine === "" || reg.test(scoreNine) === false) {
                                                    //第九题未选择
                                                    fn_errorSubmitForm("第九题答案未填写或超出指定范围");
                                                } else {
                                                    //第十题判断
                                                    var scoreTen = $("#scoreTen").val();
                                                    // console.log(reg.test(Question1));
                                                    if (scoreTen === "" || reg.test(scoreTen) === false) {
                                                        //第十题未选择
                                                        fn_errorSubmitForm("第十题答案未填写或超出指定范围");
                                                    } else {
                                                        axios({
                                                            method: 'post',
                                                            url: '/index/scoreResult',
                                                            data: {
                                                                qsId,
                                                                scoreOne,
                                                                scoreTwo,
                                                                scoreThree,
                                                                scoreFour,
                                                                scoreFive,
                                                                scoreSix,
                                                                scoreSeven,
                                                                scoreEight,
                                                                scoreNine,
                                                                scoreTen,
                                                            }
                                                        }).then(function (response) {
                                                            var res = response.data;
                                                            if (res.code === 200) {
                                                                window.location.href = '/goScoreSuccess';
                                                            }

                                                        })
                                                        console.log(scoreOne);
                                                        // 提交表单
                                                        // $("#QuestionForm").submit(); 

                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        </script>
        <script>
            // 用户名密码的错误提示函数
            function fn_errorSubmitForm(errorHint) {
                $('.errorSubmitForm').text(errorHint);
                $('.errorSubmitForm').removeClass('invisible');
                setTimeout(() => {
                    $('.errorSubmitForm').addClass('invisible');
                }, 5000);
            }
        </script>
</body>

</html>